import React, { Component } from 'react';
import { getMvUrl, getMvxiangqing, getXiangsiMv } from '../../utils/api';
import '../../style/all.css';
import './MvDetail.css';

export default class MvDetail extends Component {
	state = {
		mvUrl: '',
		mvDetail: {},
		xiangsiMvList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getMvs();
	}
	async getMvs () {
		let { search } = this.props.props.location;
		let mvId = search.split('=')[1];
		let mvUrl = await getMvUrl(mvId);
		let mvDetail = await getMvxiangqing(mvId);
		let xiangsiMvList = await getXiangsiMv(mvId);
		this.setState({
			mvUrl: mvUrl.data.url,
			mvDetail: mvDetail.data,
			xiangsiMvList: xiangsiMvList.mvs
		})
	}
	render () {
		let { cover, name, artistName } = this.state.mvDetail;
		let { mvUrl, xiangsiMvList } = this.state;
		return (
			<div className='mvdetail main'>
				<div className='left'>
					<div className='back red' onClick={() => { this.props.props.history.goBack(); }}>&lt;返回</div>
					<h2>MV详情</h2>
					<div className='video_box'>
						<video src={mvUrl} poster={cover} muted autoPlay controls width='700' height='400'></video>
					</div>
					<div className='mvtt'>
						<h2>{name}</h2>
						<span className='red' onClick={() => { window.sessionStorage.removeItem("serachlocation"); this.props.props.history.push(`/search?keywords=${artistName}&type=1004`) }}>{artistName}</span>
					</div>
				</div>
				<div className='right'>
					<h2>相关推荐</h2>
					<ul>
						{xiangsiMvList.map((item) => (
							<li key={item.id} onClick={() => { this.props.props.history.push(`/mvdetail?id=${item.id}`); }}>
								<div title='点击播放' className='mvd_img'>
									<img src={item.cover} alt="" width='100%' height='100%' />
								</div>
								<p>
									<span className='tt'>{item.name}</span>
									<span>{item.artists[0].name}</span>
								</p>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
